import styles from './index.css';
import correlation_bg from '@/assets/home/correlation_bg.png';
import CorrelationPoint from '@/pages/DataStatistics/PublicOpinionAnalysis/correlationPoint';
import StrongAndWeak from '@/pages/DataStatistics/PublicOpinionAnalysis/strongAndWeak';

const CorrelationAnalysis = () => {
  const randomNum = (min, max) => {
    var Range = max - min;
    var Rand = Math.random();
    var num = min + Math.round(Rand * Range);
    return num;
  };

  const getX = index => {
    let x = (1 / data.length) * 100 * index + '%';
    return x;
  };

  const data = [
    {
      name: '奇智客服',
      value: 1,
    },
    {
      name: '客服中心',
      value: 2,
    },
    {
      name: '对话机器人',
      value: 3,
    },
    {
      name: '客服系统',
      value: 4,
    },
    {
      name: '呼入呼出',
      value: 5,
    },
    {
      name: '智能机器人',
      value: 6,
    },
    {
      name: '在线客服系统',
      value: 7,
    },
    {
      name: '智能客服系统1',
      value: 8,
    },
    {
      name: '智能客服系统2',
      value: 9,
    },
    {
      name: '智能客服系统3',
      value: 10,
    },
    {
      name: '智能客服系统4',
      value: 11,
    },
    {
      name: '智能客服系统5',
      value: 12,
    },
  ];
  return (
    <div>
      <div
        className={['clearfix', styles.correlation_box].join(' ')}
        style={{
          background: 'url(' + correlation_bg + ') no-repeat top center',
          backgroundSize: 'auto 100%',
        }}
      >
        <div className={styles.correlation_left}>
          {data.map((item, index) => {
            return (
              <CorrelationPoint name={item.name} index={index} key={index} data={data} position={'left'} />
            );
          })}
          <StrongAndWeak leftWord={'弱'} rightWord={'强'} />
        </div>
        <div className={styles.correlation_center}>智能客服</div>
        <div className={styles.correlation_right}>
          {data.map((item, index) => {
            return (
              <CorrelationPoint name={item.name} index={index} key={index} data={data} position={'left'} />
            );
          })}
          <StrongAndWeak leftWord={'强'} rightWord={'弱'} />
        </div>
      </div>
      <div className={styles.correlation_title}>关键词相关性分析</div>
    </div>
  );
};

export default CorrelationAnalysis;
